<!--
 * @Descripttion: 销售单详情查看
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 14:52:14
 -->
<template>
  <div class="bill_container">
    <div v-if="dataObj.isCancle === '1'" class="cancle_img">
      <img src="@/assets/images/cancle.png" alt="cancle">
    </div>
    <affix>
      <div class="clearfix paddingLR20">
        <div class="oper-button btn-group fl">
          <el-button type="default" @click="btnPrint">打印</el-button>
        </div>
        <div class="oper-button btn-group fr">
          <el-button type="default" @click="btnJump2List">历史单据</el-button>
        </div>
      </div>
    </affix>
    <el-main>
      <div id="printBox">
        <el-card shadow="never">
          <div slot="header" class="header clearfix">
            <div class="clearfix index_container form font12 paddingT20">
              <div class="fr">
                <span>单据编号 : {{ dataObj.billNo }}</span>
              </div>
            </div>
            <div class="index_container title">
              <h1>
                商品销售单
                <span class="font12">({{ changeQStatus }}, {{ returnQStatus }})</span>
              </h1>
            </div>
          </div>
          <div class="clearfix font12 paddingB10">
            <div class="fr">
              <span>经手人 : {{ dataObj.handUserName }}</span>
              <span class="margin-l10">业务日期 : {{ dataObj.businessTime }}</span>
            </div>
          </div>
          <div v-show="billExtSale.isDelivery === '1'" class="bg-gay border-gay padding10">
            <span>送货日期: </span> {{ billExtSale.deliveryDate }}
            <span class="margin-l10">客户联系人: </span> {{ billExtSale.contacter }}
            <span class="margin-l10">联系电话: </span> {{ billExtSale.phone }}
            <span class="margin-l10">送货地址: </span> {{ billExtSale.deliveryAddress }}
          </div>
          <ShowGoodsList ref="GoodsSelect" :is-open-tax="isOpenTax" />
          <div class="bottom">
            <table class="table" border="1" cellspacing="0" cellpadding="0">
              <tr>
                <td align="right" @mouseenter="onTdMouseEnter" @mouseleave="onTdMouseLeave">
                  <div class="w300">
                    其他费用 : {{ dataObj.amountOther || '0.00' }}
                  </div>
                </td>
                <td :width="tableFixedWidth" class="bg-blue">
                  结算账户 : {{ dataObj.accountName }}
                </td>
              </tr>
              <tr>
                <td align="right">
                  <div class="w200">
                    应付金额 : {{ dataObj.amountPayable }}
                  </div>
                </td>
                <td :width="tableFixedWidth" class="bg-blue">
                  实付金额 : {{ dataObj.amountPaid }}
                </td>
              </tr>
              <tr>
                <td colspan="2" style="padding:1;" @mouseenter="onTdMouseEnter" @mouseleave="onTdMouseLeave">
                  <table class="wfull" border="0" cellspacing="0" cellpadding="0">
                    <tr class="lastrow">
                      <td width="100">
                        备 注:
                      </td>
                      <td class="lastCol">
                        {{ dataObj.remarks }}
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </div>
        </el-card>
      </div>
    </el-main>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import { amount } from '@/libs/tools.js'
import { update } from './mixins'
import Affix from '@/components/Affix'
import ShowGoodsList from './table-view'

export default {
  name: 'SaleDetail',
  components: { Affix, ShowGoodsList },
  filters: {
    goodAmount: function(row) {
      return amount(row.price).multiply(row.num).format()
    }
  },
  mixins: [update, oftenuse],
  props: {
    billId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      tableFixedWidth: 300,
      billExtSale: {},
      goodsSelectComp: null
    }
  },
  computed: {
    changeQStatus: function() {
      const { goodsQuantity, changeQuantity } = this.dataObj
      if (changeQuantity === null || changeQuantity === 0) return '未出库'
      if (changeQuantity !== 0 && goodsQuantity > changeQuantity) return '部分出库'
      if (goodsQuantity === changeQuantity) return '全部出库'
      return ''
    },
    returnQStatus: function() {
      const { goodsQuantity, returnQuantity } = this.dataObj
      if (returnQuantity === null || returnQuantity === 0) return ''
      if (returnQuantity !== 0 && goodsQuantity > returnQuantity) return '部分退货'
      if (goodsQuantity === returnQuantity) return '全部退货'
      return ''
    },
    isOpenTax: function() {
      const goodsSelectComp = this.goodsSelectComp
      if (!goodsSelectComp) return false
      const tableData = goodsSelectComp.getTableData()
      for (let i = 0; i < tableData.length; i++) {
        const row = tableData[i]
        if (row.taxRate) {
          return true
        }
      } return false
    }
  },
  watch: {
  },
  mounted() {
    this.goodsSelectComp = this.$refs.GoodsSelect
  },
  created() {
    this.initData()
  },
  methods: {
    btnPrint() {
      const billId = this.billId
      const billCat = 'sale'
      const title = '商品销售单'
      window.open(`/#/print?billId=${billId}&billCat=${billCat}&title=${title}`, '_blank')
    },
    btnJump2List() {
      this.$router.push({
        name: 'PurchaseList'
      })
    },
    initData() {
      this.initViewData()
    },
    // on
    onTdMouseEnter(e) {
      const target = e.target
      target.className = 'bg-gay'
    },
    onTdMouseLeave(e) {
      const target = e.target
      target.className = ''
    }
  }
}
</script>
